<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/common.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/beautify-time.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/select2.min.css" type="text/css">
    <style>
    	.select2-container{
    		width:100% !important;
    	}
    	.select2-container .select2-selection--single{
    		height:34px;
    	}
    </style>
   	<%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
   	<script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
   	<script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
   	<script src="${newframe}/js/select2.full.zh.js"></script> 
   	<script>
   	var sHosId = "${entity.hosId}";
   	var sHospName = "${entity.hosName}";
   	$(document).ready(function() {
   		if(sHosId != ""){
   			$("#hosId").append("<option value='"+sHosId+"'>"+sHospName+"</option>");
   		}
   		$("#installType").change(function(){
            if(this.value=="1"){
            	$("#hosDiv").css("display","block");
                //$("#hosDiv2").css("display","none");
            } else {
            	$("#hosDiv").css("display","none");
                //$("#hosDiv2").css("display","block");
            }
        });
   		 /* $('#myForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	instrumentId: {
                    validators: {
                        notEmpty: true
                    }
                },mkMedicalInstrumenId: {
                    validators: {
                        notEmpty: true
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            e.preventDefault();
        }); */
   	});
   	//保存
   	function save(){
   		if(validateForm()){
   			$("#instrumentId").removeAttr("disabled");
   			$("#version").removeAttr("disabled");
			$.ajax({
	            url:'${URL_QULITITY_UPDATEINSTALL}',
	            type:'post',
	            data:$('#myForm').serialize(),
	            async : false, //默认为true 异步
	            error:function(){
	                alert('error');
	            },
	            success:function(data){
                    console.log(data);
	                data = JSON.parse(data);
	                console.log(data);
	            	if(data.success){
	            		closeFrame();
	            	}else{
	            		alert(data.msg);
	            	}
	            	
	            }
	        });
   		}
   		/* if($("#myForm").data('bootstrapValidator').isValid()){
   			
   		}else{
   			$('#myForm')  
   	   	    .bootstrapValidator('validateField', 'mkMedicalInstrumenId')  
   	   	    .bootstrapValidator('validateField', 'instrumentId');
   		} */
   	}
   	
   	//关闭并刷新
	function closeFrame(){
		window.parent.closeModal();
	}
   	//验证表单
   	function validateForm(){
   		var sInstrumentId = $("#instrumentId").val();
   		if(sInstrumentId == null || sInstrumentId == ''){
   			alert("请选择仪器！");
   			return false;
   		}
   		return true;
   	}
   	</script>
</head>
<body style="width: 98%">
<form id="myForm" class="form-horizontal" onSubmit="return false">
    <input type="hidden" id="id" name="id" value="${entity.id}" />
    <input type="hidden" id="mt" name="mt" value="${entity.mt}" />
    <div class="clearfix">   
	    <div class="form-group col-sm-6">
	        <label for="instrumentId" class="col-sm-4 control-label">仪器名称</label>
	        <div class="col-sm-8">
	            <select id="instrumentId" name="instrumentId" class="form-control">
	                <option value="">请选择...</option>
	                <c:forEach items="${instrumentList}" var="instrument">
	                    <option value="${instrument.id}" <c:if test="${instrument.id==entity.instrumentId}">selected="selected"</c:if> >${instrument.instrumentName}</option>
	                </c:forEach>
	            </select>
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
		        <label for="version" class="col-sm-4 control-label">版本号</label>
		        <div class="col-sm-8">
		            <select id="version" name="version" class="form-control">
	       			</select>
		        </div>
		</div>
	    <div class="form-group col-sm-6">
	        <label for="mkMedicalInstrumenId" class="col-sm-4 control-label">仪器SN</label>
	        <div class="col-sm-8">
	            <input type="text" class="form-control" id="mkMedicalInstrumenId" name="mkMedicalInstrumenId" value="${entity.mkMedicalInstrumenId}">
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="medicalInstrumenId" class="col-sm-4 control-label">代理商SN</label>
	        <div class="col-sm-8">
	            <input type="text" class="form-control" id="medicalInstrumenId" name="medicalInstrumenId" value="${entity.medicalInstrumenId}">
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="installType" class="col-sm-4 control-label">安装类别</label>
	        <div class="col-sm-8">
	            <select id="installType" name="installType" class="form-control">
	                <option value="1" <c:if test="${entity.installType==1}">selected="selected"</c:if> >医院</option>
	                <option value="2" <c:if test="${entity.installType==2}">selected="selected"</c:if> >个人</option>
	            </select>
	        </div>
	    </div>
	    <div class="form-group col-sm-6" id="hosDiv">
	        <label for="hosId" class="col-sm-4 control-label" id="">医院</label>
	        <div class="col-sm-8">
	     <%--    <select id="hosId" name="hosId" class="form-control">
                <option value="">请选择...</option>
                <c:forEach items="${hospitalList}" var="hospital">
                    <option value="${hospital.id}" <c:if test="${hospital.id==entity.hosId}">selected="selected"</c:if> >${hospital.hospName}</option>
                </c:forEach>
            </select>   --%>
	            <select name="hosId" id="hosId"  class="form-control">
                    <option value="-1"></option>
                    <option value="0">---请选择---</option>
                </select>
               
            </div>
	    </div>

	  	<!-- <div class="form-group col-sm-6" id="hosDiv2" style="display: none;height:35px;">
	    </div> -->
	    <div id="date" class="form-group col-sm-6" style="margin-bottom: 15px">
            <label class="col-sm-4 control-label">安装日期</label>
           	<div class="col-sm-8">
            <div id="picker" class="input-group date form_date col-sm-12" data-date-format="yyyy-mm-dd">
                <input id="installTime" name="installTime" class="form-control" type="text" readonly style="text-indent:0;background-color:#fff;"
					   value="${installTime}">
<%--                <c:if test="${installTime !=null}">value="${installTime}"</c:if>>--%>
                <span id="tbInstallTime" class="input-group-addon" style="background-color:#fff;">
                    <span class="glyphicon-calendar">&gt;</span>
                </span>
            </div>
         	</div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="contactMan" class="col-sm-4 control-label">联系人</label>
	        <div class="col-sm-8">
	            <input type="text" class="form-control" id="contactMan" name="contactMan" value="${entity.contactMan}">
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="contactTel" class="col-sm-4 control-label">联系电话</label>
	        <div class="col-sm-8">
	            <input type="text" class="form-control" id="contactTel" name="contactTel" value="${entity.contactTel}">
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="installMan" class="col-sm-4 control-label">安装人员</label>
	        <div class="col-sm-8">
	            <input type="text" class="form-control" id="installMan" name="installMan" value="${entity.installMan}">
	        </div>
	    </div>
	    <div class="form-group col-sm-6">
	        <label for="installAddress" class="col-sm-4 control-label">安装地址</label>
	        <div class="col-sm-8">
	        	<textarea id="installAddress" name="installAddress" class="form-control" rows="4" >${entity.installAddress}
		        </textarea>
	            <%-- <input type="text" class="form-control" id="installAddress" name="installAddress" value="${entity.installAddress}"> --%>
	        </div>
	    </div>
    </div>
    <div class="modal-footer" style="text-align: center">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt" onclick="closeFrame()">关闭</button>
        <button id="saveBtn" type="button" class="btn btn-primary" onclick="save();">保存</button>
    </div>
</form>
<script>
$(document).ready(function() {
	var sMt = "${entity.mt}";
		if(sMt == '3'){
			$("#instrumentId").attr("disabled","disabled");
			$("#version").attr("disabled","disabled");
			$("#mkMedicalInstrumenId").attr("readonly","readonly");
			$("#saveBtn").css("display","");
			$('#picker').datetimepicker({
				language:  'zh-CN',
		        weekStart:  0,
		        todayBtn: true,
		        autoclose:  1,
		        todayHighlight: 1,
		        startView: 2,
		        minView: 2,
		        forceParse: 0 ,
		        format: "yyyy-mm-dd",
		        initialDate: new Date()
		    });
		}else{
			$("#medicalInstrumenId").attr("readonly","readonly");
			$("#installAddress").attr("readonly","readonly");
			$("#installType").attr("disabled","disabled");
			$("#hosId").attr("disabled","disabled");
			$("#installTime").attr("disabled","disabled");
			$("#tbInstallTime").attr("disabled","disabled");
			$("#installTime").css("background-color","#eee");
			$("#tbInstallTime").css("background-color","#eee");
			$("#installMan").attr("readonly","readonly");
			$("#contactMan").attr("readonly","readonly");
			$("#contactTel").attr("readonly","readonly");
		}
		
		$('.datetimepicker').css('top','90px');
});
</script>
<script>
function initHosp(id){
	$(id).select2({
        placeholder: '提示信息',
        ajax: {
            url: '${URL_BASE_SELECTHOSPITAL}',
            dataType: 'json',
            type: "post",
            delay: 250,
            data: function (params) {
                var data=new Object();
                data["limit"]=10;
                if(params.page==undefined){
                    data["offset"]=0;
                }else {
                    data["offset"]= (params.page-1)*10;
                }
                if(params.term!=undefined){
                    data["name"]= params.term;
                }
                return data;
            },
            processResults: function (data, params) {
            	params.page = params.page || 1;
                return {
                    results: data.data,
                    pagination: {
                        more: (params.page * 10) < data.msg
                    } 
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 0,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });
}
function formatRepo (repo) {
    if (repo.loading) return repo.text;
  	var markup ="<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-repository__title'>" + repo.text + "</div></div>"; 
     return markup;
}

function formatRepoSelection (repo) {
	$("#hosId").val(repo.id);
    return repo.text;
}
function getBaseCode(code){
	$.ajax({
	       url:"${URL_BASE_GETBASECODE}",
	       type:'post',
	       data:'code='+code,
	       error:function(){
	           alert('error');
	       },
	       success:function(data){
	           var objs = document.getElementById(code);
	           objs.options.length = 1;
	           var area = JSON.parse(data).data;
	           for(var i=0;i<area.length;i++){
	               var childOption = document.createElement("option");
	               childOption.value = area[i].value;
	               childOption.innerHTML = area[i].name;
	               objs.appendChild(childOption);
	           }
	           $("#version option[value=${entity.version}]").attr("selected", "selected");
	       }
	   });
}
$(function () {
	getBaseCode("version");
 	$("#hosId").select2().val(sHosId).trigger("change");
 	initHosp("#hosId");
});
</script>
</body>
</html>